<template>
	<view class="">
		<view class="search2-top">
			<view class="search2-top-left" @click="backFn">
				<image class="search2-top-left-img" src="../../../static/images/search1/back.png" mode=""></image>
			</view>
			<view class="search" @click="backSearch">
				<image class="search-img" src="../../static/images/realestate/cha@3x.png" mode=""></image>
			</view>
			<view class="search2-top-center">
				婚姻登记信息查询
			</view>
			<view class="search2-top-right">
				<image class="search2-top-right-img" src="../../static/images/marriage/Frame26@3x.png" mode=""></image>
			</view>
		</view>
		
		<view class="marriage">
			<image class="marriage-bg" src="../../static/images/marriage/Frame88@3x.png" mode="widthFix"></image>
			<image class="marriage-bg1" src="../../static/images/marriage/Group62@3x.png" mode=""></image>
			<view class="marriage-box">
				<image class="nothing" src="../../static/images/marriage/nothing.png" mode=""></image>
				<div class="nothing-bole">未查询到登记记录！</div>
				<div class="nothing-text">若查询结果与实际不符，请及时联系户籍所在地婚姻登记处核实信息</div>
				<view class="marriage-box-button" @click="backFn">
					返回
				</view>
			</view>
			<image class="marriage-bg2" src="../../static/images/marriage/Group70@3x.png" mode=""></image>
		</view>
		
		
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const backFn = () => {
		uni.navigateBack(-1)
	}
	const backSearch = () => {
		uni.navigateTo({
			url: '/pages/search/search1'
		})
	}
</script>

<style scoped lang="scss">
	.search2-top {
		height: 184rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		padding-top: 96rpx;
		display: flex;
	
		.search2-top-left {
			width: 10%;
	
			.search2-top-left-img {
				width: 88rpx;
				height: 88rpx;
			}
		}
	
		.search {
			width: 10%;
	
			.search-img {
				width: 88rpx;
				height: 88rpx;
			}
		}
	
		.search2-top-center {
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			width: 65%;
			padding-left: 38rpx;
			line-height: 88rpx;
		}
	
		.search2-top-right {
			width: 15%;
			display: flex;
	
			.search2-top-right-img {
				width: 80rpx;
				height: 80rpx;
			}
	
		}
	
	}
	
	.marriage {
		position: relative;
	
		.marriage-bg {
			width: 100%;
		}
	
		.marriage-bg1 {
			position: absolute;
			width: 193rpx;
			height: 200rpx;
			top: 64rpx;
			right: 76rpx;
		}
	
		.marriage-box {
			width: 90%;
			position: absolute;
			margin-left: 5%;
			top: 182rpx;
			padding: 44rpx 56rpx 74rpx 56rpx;
			box-shadow: 0rpx 8rpx 31rpx 0rpx rgba(0, 0, 0, 0.25);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			// background-color: rgba(255, 255, 255, 0.6);
			background-color: #fff;
			height: 860rpx;
			// position: relative;
			.nothing{
				width: 374rpx;
				height: 286rpx;
				position: absolute;
				left: 50%;
				top: 122rpx;
				transform: translate(-50%,0);
			}
			.nothing-text{
				text-align: center;
				margin-top: 32rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #666666;
				
			}
			.nothing-bole{
				text-align: center;
				margin-top: 396rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 33rpx;
				
			}
	
			.marriage-box-button {
				width: 90%;
				margin-left: 5%;
				height: 84rpx;
				background: #1477FF;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				line-height: 84rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 84rpx;
	
			}
		}
	
		.marriage-bg2 {
			width: 100rpx;
			height: 209rpx;
			position: absolute;
			top: 76rpx;
			right: 78rpx;
	
		}
	}
	
	.notification {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 614rpx;
		// height: 282rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		z-index: 33;
	
		.notification-top {
			text-align: center;
			margin-top: 36rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;
	
		}
	
		.notification-center {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-top: 22rpx;
			margin-bottom: 34rpx;
	
		}
	
		.notification-bottom {
			display: flex;
			justify-content: center;
			text-align: center;
			align-items: center;
			border-top: 1rpx solid #EEEEEE;
			height: 106rpx;
	
			.notification-bottom-left {
				width: 50%;
				border-right: 1rpx solid #EEEEEE;
				height: 106rpx;
				line-height: 106rpx;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #009CFF;
	
			}
	
			.notification-bottom-right {
				height: 106rpx;
				width: 50%;
				line-height: 106rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #FF0000;
	
			}
		}
	}
	
</style>